<template>
  <el-main style="padding: 0px 20px">
    <el-row style="margin:20px 0px">
      <el-select style="margin-right:10px;width:100px" v-model="choiceType" placeholder="全部" @change="typeSearch" collapse-tags clearable>
        <el-option
          v-for="(item,index) in searchType"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="choiceDateTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
        @blur="choiceDate"
        @change="choiceDate"
        >
      </el-date-picker>
    </el-row>
    <el-table
      :height="tableHeight"
      :data="tableDate"
      row-key="id"
    >
    <el-table-column align="center" label="订单编号" show-overflow-tooltip>
      <template slot-scope="scope">
        {{scope.row.no}}
        <i class="el-icon-document-copy copyIcon" @click="copyOrderNo(scope.row.no,$event)"></i>
      </template>
    </el-table-column>
    <el-table-column align="right" width="100px"  prop="balanceChange" label="积分变动">
        <template slot-scope="scope">
          {{scope.row.pointChange | showPoint(scope.row.type)}}
        </template>
    </el-table-column>
    <el-table-column align="right" width="110px"  prop="point" label="剩余积分">
        <template slot-scope="scope">
          {{scope.row.point | showPoint}}
        </template>
    </el-table-column>
    <el-table-column align="center" width="150px"  label="类型">
        <template slot-scope="scope">
          {{showType(scope.row.type,scope.row.remark)}}
        </template>
    </el-table-column>
    <el-table-column width="180px" prop="createTime" align="center" label="时间"></el-table-column>
    </el-table>
    <!-- 分页区 -->
    <pagination
    ref="pagination"
    @pagination="getPagination"
    :total="parseInt(totalPage)"
    :page="parseInt(searchCondition.page)"
    :limit="parseInt(searchCondition.pageSize)"
    :pageSizes="paginationSize"
    ></pagination>
  </el-main>
</template>

<script>
import mySearch from "@/components/MySearch/index";
import pagination from "@/components/Pagination/index";
import clip from '@/utils/clipboard';
import { getPointJournalApi } from '@/api/journal';
  export default {
    components: {  mySearch, pagination},
    props: {
      aid: {
        type: Number,
        require: true
      }
    },
    data(){
      return{
        tableDate:[],
        tableHeight:0,
        searchCondition :{
          aid:this.aid,
          type:'',
          startTime:'',
          endTime:'',
          page: 1,
          pageSize: 10,
        },
        //分页容量
        paginationSize: [5,10,20,30,50],
        //查询返回 总记录数
        totalPage: 0,
                choiceType:[],
        //筛选项
        searchType:[{label:"消费抵扣",value:1},{label:"奖励退回",value:0}],
        choiceDateTime:'',
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一个月',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created(){
        this.getPointJournal();
    },
    mounted() {
      this.$nextTick(() => {
        //有页码区就高度多-120
        this.tableHeight = window.innerHeight - 323 - 120;
      })
    },
    methods: {
      //
      showType(type,remark){
        if(type==1){
          switch (remark) {
            case 0:
              return '抵扣预约费用'
            case 1:
              return '抵扣租赁费用'
            case 2:
              return '抵扣购买费用'
            default:
              return '其它'
          }
        }else if(type==0){
          switch (remark) {
            case 0:
              return '预约取消退回'
            case 1:
              return '租赁取消退回'
            case 2:
              return '购买取消退回'
            case 3:
              return '消费奖励'
            default:
              return '其它'
          }
        }
      },
      //复制订单号
      copyOrderNo(text, event) {
        clip(text, event)
      },
      //日期范围查询
      choiceDate(){
        if(this.choiceDateTime!=null){
          this.searchCondition.startTime = this.choiceDateTime[0];
          this.searchCondition.endTime = this.choiceDateTime[1];
        }else{
          this.searchCondition.startTime = '';
          this.searchCondition.endTime = '';
        }
        this.getPointJournal();
      },
      //类型查询
      typeSearch(){
        this.searchCondition.type = this.choiceType;
        this.getPointJournal();
      },
      //分页查询getPagination
      getPagination(val){
        this.searchCondition.page = val.page;
        this.searchCondition.pageSize = val.limit;
        this.getPointJournal();
      },
      //查询
      async getPointJournal(){
        let res = await getPointJournalApi(this.searchCondition);
        if(res&&res.code==200){
          this.tableDate = res.data.list;
          this.totalPage = res.data.total;
        }
      }
    },
    filters:{
      showPoint(val,type){
        if(type==0&&val!==0){
          return '+'+val
        }else if(type==1&&val!==0){
          return '-'+val
        }else{
          return val
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .copyIcon{
    font-size: 16px;
    color:#409EFF;
    cursor: pointer;
    &:hover{
      font-weight: bold;
      text-decoration:underline;
    }
  }
</style>
